import React, { useEffect } from "react";
import { Modal, Form, Input, Select, Row, Col } from "antd";

const { Option } = Select;

// 客户数据类型定义
export interface ClientData {
  key?: string;
  clientCode: string;
  clientName: string;
  industry: string;
  classification: string;
  contactPerson: string;
  contactPhone: string;
  email: string;
  department: string;
  responsiblePerson: string;
  status: string;
  address: string;
}

interface ClientModalProps {
  visible: boolean;
  isEdit: boolean;
  initialValues?: ClientData;
  onCancel: () => void;
  onSubmit: (values: ClientData) => void;
}

const ClientModal: React.FC<ClientModalProps> = ({
  visible,
  isEdit,
  initialValues = {
    clientName: "",
    clientCode: "",
    industry: "",
    classification: "",
    contactPerson: "",
    contactPhone: "",
    email: "",
    department: "",
    responsiblePerson: "",
    status: "启用",
    address: "",
  },
  onCancel,
  onSubmit,
}) => {
  const [form] = Form.useForm();

  useEffect(() => {
    // 只有当visible为true且有initialValues时才设置表单值
    if (visible && initialValues) {
      // 延迟设置表单值，确保Modal已经完全渲染
      const timer = setTimeout(() => {
        form.setFieldsValue(initialValues);
      }, 0);
      
      return () => clearTimeout(timer);
    }
    // 当Modal关闭时重置表单
    // if (!visible) {
    //   form.resetFields();
    // }
  }, [visible, initialValues, form]);

  const handleSubmit = () => {
    form
      .validateFields()
      .then((values) => {
        onSubmit(values as ClientData);
      })
      .catch((info) => {
        console.log("表单验证失败:", info);
      });
  };

  return (
    <Modal
      title={isEdit ? "编辑客户" : "新增客户"}
      open={visible}
      onOk={handleSubmit}
      onCancel={onCancel}
      width={700}
      // 确保Modal在关闭时重置表单
      afterClose={() => form.resetFields()}
    >
      {/* 只有当visible为true时才渲染Form，确保form实例正确连接 */}
      {visible && (
        <Form form={form} layout="vertical">
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              label="客户编码"
              name="clientCode"
              rules={[{ required: true, message: "请输入客户编码" }]}
            >
              <Input />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="客户名称"
              name="clientName"
              rules={[{ required: true, message: "请输入客户名称" }]}
            >
              <Input />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="所属行业" name="industry">
              <Select placeholder="请选择行业">
                <Option value="零售">零售</Option>
                <Option value="制造">制造</Option>
                <Option value="医药">医药</Option>
                <Option value="工程">工程</Option>
                <Option value="其他">其他</Option>
              </Select>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="客户分类" name="classification">
              <Select placeholder="请选择客户分类">
                <Option value="批发客户">批发客户</Option>
                <Option value="零售客户">零售客户</Option>
                <Option value="VIP客户">VIP客户</Option>
              </Select>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="联系人" name="contactPerson">
              <Input />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="联系电话" name="contactPhone">
              <Input />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="电子邮箱" name="email">
              <Input />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="销售部门" name="department">
              <Input />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="负责人" name="responsiblePerson">
              <Input />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="状态" name="status">
              <Select>
                <Option value="启用">启用</Option>
                <Option value="禁用">禁用</Option>
              </Select>
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item label="客户地址" name="address">
              <Input.TextArea rows={3} />
            </Form.Item>
            </Col>
          </Row>
        </Form>
      )}
      </Modal>
    );
};

export default ClientModal;